<template>
  <div class="detail-list">
    <h2>搜索关键词：<span>{{searchkey}}</span></h2>
    <ul class="pro-list">
      <li
              v-for="item in searchList"
              :key="item.id"
              class="pro-list-item"
              @click="toDetail(item.id)"
            >
              <a href="javascript:;">
                <div class="item-img">
                  <img v-lazy="item.coverImg" alt="" />
                </div>
                <div class="info">
                  <div class="item-name-big">
                    <div class="item-name">{{ item.goodsName }}</div>
                    <span>库存:{{item.inventory}}</span>
                  </div>
                  <!-- <p class="item-desc">出产地：{{ item.countryOfOrigin }}</p> -->
                  <p class="item-price">{{ item.sellPrice }}元</p>
                  <!-- <p class="item-text">{{
                    item.describeTxt}}</p> -->
                </div>
              </a>
            </li>
            <li class="pro-list-item virtual-item" v-for="(item, index) in (5 - searchList.length%5)" :key="index"></li>
    </ul>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'DetailList',
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['searchList']),
    searchkey () {
      return this.$route.query.searchkey
    }
  },
  methods: {
    /**
     * 去商品详情页
     */
    toDetail (id) {
      this.$router.push("/detail/" + id)
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-list{
  padding: 20px 10%;
  box-sizing: border-box;
  width: 100%;
  h2{
    margin: 20px 0;
    span{
      color: #F40;
      font-weight: 700;
    }
  }
.pro-list {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
.pro-list-item {
  
  flex: 0 1 23%;
  background-color: #eee;
  &:hover{
    border: 1px solid red;
  }
}
.virtual-item{
  background-color: transparent;
}
.pro-list-item:nth-child(n + 5) {
  margin-top: 14px;
}
.pro-list-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.item-img {
  width: 100%;
  height: 160px;
}
.item-img img {
  width: 100%;
  height: 100%;
}
.info {
  width: 100%;
  padding-bottom: 10px;
}
.item-name-big{
  width: 100%;
  padding: 10px;
  box-sizing:border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  span{
    padding: 10px;
    color: #999;
  }
}
.item-name {
  padding: 10px;
  font-size: 24px;
  color: #F40;
  font-weight: 700;
}
.item-desc {
  font-size: 12px;
  color: #999;
  margin: 4px 0 10px 0;
}
.item-price{
  position: relative;
  font-size: 18px;
  font-weight: 600;
  color: #f20a0a;
  padding: 0 20px;
  width: 100%;
}
.item-text{
  font-size: 14px;
  font-weight: 600;
  color: #000;
  padding: 0 20px;
  width: 100%;
}
}
</style>
